<template>
  <section class="page bg-default">
    <headerbar>专题</headerbar>

    <div class="banner">
      <img src="../../../../static/images/dangjian/home/special2020.png" alt="">
    </div>

    <section class="">
      <ul class="tab">
        <li @click="getList()" :class="{'active':tabIndex==0}"><span>走近抗疫一线</span></li>
        <li @click="liveMessage()" :class="{'active':tabIndex==1}"><span>留言寄语</span></li>
      </ul>
    </section>
    <section style="height:500px;" class="no-shadow bg-default" v-if="tabIndex == 0">
      <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
      >
        <div class="block live-msg-wrap" v-for="(item,index) in list" :key="index">
          <div class="user-avatar">
            <div class="avatar">
              <img v-if="false" :src="tools.getAvatarUrl(item.commentUserId, true)" alt="">
              <img v-else src="../../../../static/images/dangjian/home/water-logo.png" alt="">
            </div>
            <div class="info">
              <h1>{{item.commentUser}}  向  <span class="big-text">{{ item.replyToUser || '医护人员' }}</span> 致敬！</h1>
              <div v-if="isMyComment(item.commentUserId)" class="right" @click="deleteComment(item,index)">删除</div>
            </div>

          </div>
          <div class="live-msg">{{item.commentContent}}</div>
<!--          <div class="card-foot">
            <p class="text"><span class="icon-time"></span>{{item.commentTime}}</p>
            <div class="right">
              <ups :contentId="contentId" :commentId="item.commentId" :upsCount="item.ups"></ups>
            </div>
          </div>-->
          <div class="card-foot">
            <p class="text">{{tools.getTimeNew(item.commentTime)}}</p>
            <div class="right">
              <div class="support"><ups :key="item.commentId" :contentId="contentId" :isUp="item.isUp" :commentId="item.commentId" @updateUpsAdd="updateUpsAdd(item)" :upsCount="item.ups"></ups></div>
              </div>
            </div>
          </div>
      </cube-scroll>
    </section>

    <!--留言寄语-->
    <section v-if="tabIndex == 1" class="pdh-5 block">
      <div class="input-row-wrap">
        <div class="title-my">温馨提示：</div>
        <div class="">选择此次疫情防控工作中最令你感动和敬佩的逆行者，为他们留言寄语，向他们学习致敬，凝聚众志成城、共克时艰的强大正能量。</div>
        <div class="pdv-3"></div>
      </div>
      <div class="input-row-wrap">
        <div class="name">请选择致敬职业：</div>
        <cube-select class="border" v-model="supCommentId" :options="selectList">
        </cube-select>
        <div class="pdv-3"></div>
      </div>
      <div class="check-wrap">
        <Textarea class="border" placeholder="填写您希望对致敬职业的寄语内容。" row="20" v-model="content"> </Textarea>
      </div>

      <div class="pdv-3"></div>
      <div v-preventReClick="1000" class="default-block-btn" @click="save">
        提交
      </div>
    </section>

  </section>
</template>

<script>
  import { Textarea } from 'cube-ui'
  import ups from '@/components/common/upsComponent'
  export default {
    name: 'specialDetail2020',
    components: {Textarea, ups},
    data () {
      return {
        contentId: '',
        tabIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        content: '',
        preData: {},
        options: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            txt: " ",
          },
        },
        detail: {},
        list: [],
        selectList:[],
        supCommentId:'',
        userInfo:''
      }
    },
    created () {
      this.preData = this.$store.state.specialDetail
      this.userInfo = this.$localStorage.get('userInfo')
      this.getList()
      this.getDictValue()
        // this.selectList = ['医务人员','公安干警','基层党员干部','社区、乡村守护者','快递、外卖小哥','公交、出租车司机','环卫工人','爱心志愿者','所有一线工作者']
    },
    methods: {
      getList () {
        this.tabIndex = 0
        let id = this.$route.query.id
        this.contentId = id
        let params = {
          contentId: id,
          pageNo: this.pageIndex,
          pageSize: this.pageSize
        }
        return this.fetchService.commentPage(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (res.data.length === 0) {
            this.tools.tip('已无更多数据')
          }
          this.pageIndex++
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
          this.list = this.list.concat(res.data)
          return res
        })
      },
      isMyComment(userId) {
        return userId === this.userInfo.id
      },
      /*删除评论*/
      deleteComment (item, index) {
        let me = this
        this.$createDialog({
          type: 'confirm',
          icon: '',
          title: '温馨提示',
          content: '确定删除？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.fetchService.commentDeleteCommentByNews(item.commentId,this.$route.query.id).then(res => {
              if (res.code === 0) {
                this.tools.tip('删除成功')
                me.list.splice(index, 1)
                this.$refs.liveMsg.commentDeduce()
              }
            })
          }
        }).show()
      },
      updateUpsAdd(item){///用于给子组件增加点赞数
        item.ups++
      },
      liveMessage () {
        this.tabIndex = 1
      },
      save () {
        if (this.supCommentId == '') {
          return this.tools.alert('请选择致敬职业')
        }
        if (this.content.length == 0 || this.content.trim().length == 0) {
          return this.tools.alert('请填写留言')
        }
        let params = {
          "replyToUser":this.supCommentId,//仅仅用于专题存储参数用，
          "content": this.content,
          "contentId": this.preData.id
        }
        this.tools.showLoading()
        this.fetchService.commentAdd(params).then(res => {
          this.tools.hideLoading()
          if (res.code === 0) {
            this.supCommentId = ''
            this.content = ''
            this.pageIndex = 1
            this.getList()
            this.tabIndex = 0
            return this.tools.tip('留言成功')
          }
        })
      },
      onPullingUp () {
        this.getList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = !true
          }, 100)
        })
      },
      onPullingDown() {
        console.log("onPullingDown");
        this.pageIndex = 1
        this.list = []
        this.options.pullUpLoad = true;
        this.getList()
      },
      //请求字典值
      async getDictValue () {
        let data={
          catKey:'DANG_WU_',
          treeKey:'ZJDX'
        }
        await this.fetchService.dictValue(data).then(res => {
          if(res.code === 0){
            res.data.forEach(item=>{
              this.selectList.push(item.name)
            })
            // this.selectList=res.data
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .banner {
    height: 525px;
    width: 100vw;
    img {
      @include fullImg();
    }
  }
/*  .cube-textarea-wrapper {
    textarea {
      height: auto;
    }
  }*/
  .title-my{
    font-size: 16PX;
    padding-top: 5%;
  }
  .live-msg-wrap {
    .card-foot{
      padding-left: 0.3rem;
    }
    .live-msg{
      padding-left: 0.3rem;
    }
  }
  .border{
    border: 1px solid #d0d0d0;
    border-radius: 0.13333rem;
  }
  .info{
    display: flex;
    align-items: center;
    width: 100%;
    h1{
      width: 80%;
    }
    .right{
      margin-right: 0rem;
      color: #D81E06;
      font-size: 16PX;
    }
  }

</style>
